<template>
  <!-- 外部容器 -->
  <div class="moment-container">
    <!-- 顶部操作 -->
    <div class="opearte-container">
      <div class="top-operate">
        <div class="top-opearte-left">
          <div class="icon">
            <span class="iconfont icon-duihua"></span>
          </div>
          <div class="icon">
            <span class="iconfont icon-duihua"></span>
          </div>
        </div>
        <div class="top-opearte-right">
          <div class="icon">
            <span class="iconfont icon-tuding"></span>
          </div>
          <div class="icon" @click="minimizeWindow">
            <span class="iconfont icon-2zuixiaohua-1"></span>
          </div>
          <div class="icon close" @click="closeWindow">
            <span class="iconfont icon-guanbi"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="moment-content">
      <LayoutScroll v-on:load-more-data="handleScroll" :header-gap="true" ref="scrollRef">
        <!-- 背景图 -->
        <template #header>
          <!-- 背景图区域 -->
          <div class="background-img">
            <img
              src="https://edu-make.oss-cn-shanghai.aliyuncs.com/background.jpg"
              alt=""
            />

            <div class="member-info">
              <span>木木</span>
              <img
                src="https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg"
                alt=""
                style="width: 60px; height: 60px"
              />
            </div>
          </div>
        </template>

        <!-- 实际朋友圈内容 -->
        <template #item>
          <div class="moment-item">
            <FriendMomentItem
              v-for="item in momentList"
              :key="item.id"
              :friend-moment="item"
            ></FriendMomentItem>
          </div>
        </template>

        <template #footer>
          <div v-if="!isLoding">加载更多.....</div>
        </template>
      </LayoutScroll>
    </div>
  </div>
</template>

<script setup lang="ts">
import LayoutScroll from '@/components/layout/LayoutScroll.vue';
import FriendMomentItem from '@/components/friendmoment/FriendMomentItem.vue';
import { ref } from 'vue';

const scrollRef = ref<any>(null);
const isLoding = ref(false);

const momentList = ref([
  {
    id: 1,
    avatar: 'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    nickname: '木木',
    content:
      '噢耶欧气王2️⃣金出货～恭喜🎉强哥500箱欧气王🉐双黄蛋➕双金福利💰💰，🔥手感持续火热🔥🍎📱🚗🧧',
    images: [
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',

    ],
    createtime: '12月1日',
  },
  {
    id: 2,
    avatar: 'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    nickname: '木木',
    content:
      '噢耶欧气王2️⃣金出货～恭喜🎉强哥500箱欧气王🉐双黄蛋➕双金福利💰💰，🔥手感持续火热🔥🍎📱🚗🧧',
    images: [
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    ],
    createtime: '12月1日',
  },
  {
    id: 3,
    avatar: 'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    nickname: '木木',
    content:
      '噢耶欧气王2️⃣金出货～恭喜🎉强哥500箱欧气王🉐双黄蛋➕双金福利💰💰，🔥手感持续火热🔥🍎📱🚗🧧',
    images: [
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    ],
    createtime: '12月1日',
  },
  {
    id: 4,
    avatar: 'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    nickname: '木木',
    content:
      '噢耶欧气王2️⃣金出货～恭喜🎉强哥500箱欧气王🉐双黄蛋➕双金福利💰💰，🔥手感持续火热🔥🍎📱🚗🧧',
    images: [
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    ],
    createtime: '12月1日',
  },
  {
    id: 5,
    avatar: 'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    nickname: '木木',
    content:
      '噢耶欧气王2️⃣金出货～恭喜🎉强哥500箱欧气王🉐双黄蛋➕双金福利💰💰，🔥手感持续火热🔥🍎📱🚗🧧',
    images: [
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',

    ],
    createtime: '12月1日',
  },
  {
    id: 6,
    avatar: 'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    nickname: '木木',
    content:
      '噢耶欧气王2️⃣金出货～恭喜🎉强哥500箱欧气王🉐双黄蛋➕双金福利💰💰，🔥手感持续火热🔥🍎📱🚗🧧',
    images: [
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
    ],
    createtime: '12月1日',
  },
]);

// 模拟加载更多数据
const loadMoreData = async () => {
  // 模拟请求新数据
  const newData = [
    {
      id: momentList.value.length + 1,
      avatar: 'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      nickname: '木木',
      content:
        '噢耶欧气王2️⃣金出货～恭喜🎉强哥500箱欧气王🉐双黄蛋➕双金福利💰💰，🔥手感持续火热🔥🍎📱🚗🧧',
      images: [
        'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
        'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
        'https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg',
      ],
      createtime: '12月2日',
    },
    // 其他新数据
  ];

  isLoding.value = true;
  // 模拟延迟，模拟网络请求
  setTimeout(() => {
    momentList.value.push(...newData);
    isLoding.value = false;
  }, 1000);
};

const handleScroll = async () => {
  // const container = e.target as HTMLElement;
  // if (container.scrollHeight - container.scrollTop === container.clientHeight) {
  //   loadMoreData(); // 当滚动到底部时自动加载更多数据
  // }

  if (isLoding.value) return;

  await loadMoreData();

  // 触发滚动组件更新滚动条长度时间
  if (scrollRef.value) {
    scrollRef.value.updateScroll();
  }
};
</script>

<style scoped lang="scss">
.moment-container {
  height: 100%;
  width: 100%;
  min-width: 320px;
  position: relative;

  .opearte-container {
    width: 100%;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    .top-operate {
      width: 100%;
      height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      // &:hover {
      //   background-color: #ededed;
      // }

      .top-opearte-left {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .top-opearte-right {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon {
        width: 31px;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;

        &:hover {
          background-color: #e2e2e2;
          cursor: pointer;
        }

        &:active {
          background-color: #d1d1d1;
        }

        &.close:hover {
          background-color: #fb7373;
        }

        &.is-pinned {
          background-color: #d0d0d0;
          color: #06b258;
        }

        span {
          font-size: 13px;
        }
      }
    }
  }

  .moment-content {
    height: 100%;
    width: 100%;
    flex: 1;
    z-index: -1;
    // margin-top: 30px; /* 内容从 30px 开始，避免和顶部操作重叠 */

    .background-img {
      width: 100%;
      height: 332px;
      aspect-ratio: 16 / 9; /* 确保宽高比一致 */
      // overflow: hidden;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .member-info {
        width: 120px;
        height: 65px;
        position: absolute;
        bottom: -15px;
        right: 25px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          margin-right: 10px;
          color: #fff;
        }
      }
    }

    .moment-item {
      width: 100%;
      height: 100%;
      padding: 20px 25px;
    }
  }
}
</style>
